﻿<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>我的生活</title>
        <meta name="viewport" content="initial-scale=1, maximum-scale=1">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
    
        <link rel="stylesheet" href="css/sm.css">
        <link rel="stylesheet" href="css/sm-extend.css">
        <script type="text/javascript" src="js/zepto.js" charset="utf-8"></script>
        <script type="text/javascript" src="js/sm.js" charset="utf-8"></script>
        <script type="text/javascript" src="js/sm-extend.js" charset="utf-8"></script>
    <style>
       .clearfix:after{
            content: "";
            display:table;
            clear:both;
        }
        .fl{
            float:left;
        }
        .fr{
            float:right;
        }
        .page,.page-group{
          background:#efefef;
        }
       .content .top{
         background:white;
       }
       .content .top div,p,span,a{
         font-size:.6rem;
         color:#555;
       }
       .content .top p{
         margin-left:10%;
       }
       .content .top a{
         display:inline-block;
         width:100%;
         padding-left:10%;
         background:url(image/wuliu.png) no-repeat 3% center,url(image/jiantou.png) no-repeat 95% center;
         height:2.5rem;
         line-height:2.5rem;
         border-top:1px solid #f2f2f2;
         border-bottom:1px solid #f2f2f2;
         color:red;
       }
       .content .top div:first-child{
         background:red;
         color:white;
         height:2rem;
         line-height:2rem;
         font-size:.8rem;
         padding-left:5%;
       }
       .address{
        width:84%;
        padding-left:10%;
        background:url(image/address.png) no-repeat 3% center;
        height:2rem;
        line-height:2rem;
       }
       .top2{
           margin-top:2%;
           border:1px solid green;
       }
      .dianming{
          background:white;
          margin-top:1%;
          width:100%;
      }
  .dianming .head{
    background: url(image/dianming.png) no-repeat 2% center;
    padding-left:10%;
    border-bottom: 1px solid #f2f2f2;
    position: relative;
    font-size: .6rem;
    color: #555;;
    height:2rem;
    line-height:2rem;
  }
  .dianming .head span{
      position:absolute;
      left:81%;
      color:red;
  }
  .dianming div:nth-of-type(2) p:nth-of-type(2){
    border:1px solid #ccc;
      border-radius: .2rem;
      height:1.2rem;
      line-height:1.2rem;
      width:3rem;
      color:#888;
     font-size:.5rem;
   text-align: center;
   text-decoration: none;
   margin-right:6%;
   padding-left:5%;
  }
  .xiangqing{
      width:94%;
      padding-left:3%;
  }
  .xiangqing img{
      width:34%;
  }
  .xiangqing div:last-child span{
    padding-left:25%;
    color：#555；
  }
  .xiangqing div:last-child p{
    text-decoration: line-through;
    color:#ccc;
    text-align: center;
    padding-left:25%;
  }
  .xiangqing a{
      line-height:2rem;
      height:2rem;
   
  }
  .total{
      width:100%;
      border-top:1px solid #f2f2f2;
      position: relative;
  }
  .total div{
      height:2rem;
      line-height:2rem;
      border-bottom:1px solid #f2f2f2;
  }
  .total div:first-child span:last-child{
      position:absolute;
      right:8%;
      color:red;
  }
  .total div:first-child span:first-child,.total div:last-child span:first-child{
    position:absolute;
    
    left:4%;
  }
  .date{
      background:#fff;
      padding-left:5%;
      margin-top:-3%;
      heigth:40%;
      padding-top:3%;
      padding-bottom:3%;
  }
  .date p,.date p span{
      line-height:.6rem;
      height:.6rem;
      color:#999;
}
 
    </style>

</head>


<!-- page集合的容器，里面放多个平行的.page，其他.page作为内联页面由路由控制展示 -->
    <div class="page-group">
        <!-- 单个page ,第一个.page默认被展示-->
        <div class="page">
            <!-- 标题栏 -->
            <header class="bar bar-nav pos">
               	<a class="icon icon-left pull-left open-panel" href="1.html"></a>
                <h1 class="title">订单详情</h1>
                <a class="icon icon-remove pull-right open-panel" href="1.html"></a>
            </header>
            <!-- 工具栏 -->
            <nav class="bar bar-tab">
                <a class="tab-item external active">
                    <span class="icon icon-home"></span>
                    <span class="tab-label">首页</span>
                </a>
                <a class="tab-item external">
                    <span class="icon icon-app"></span>
                    <span class="tab-label">分类</span>
                </a>
                <a class="tab-item external">
                    <span class="icon icon-cart"></span>
                    <span class="tab-label">购物车</span>
                </a>
		 <a class="tab-item external" href="#">
                    <span class="icon icon-me"></span>
                    <span class="tab-label">我的</span>
                </a>
            </nav>
            <!-- 这里是页面内容区 -->
            <div class="content">  
              <div class="top">
                  <div>交易完成</div>
                  <p>配送方式：<span>韵达快递</span></p>
                  <p>订单编号：<span>39054969005583</span></p>
                  <p>客服电话：<span>95546</span></p>
                   <a hre="#">点击查看物流详情 </a>
                  <div class="address">安徽省合肥市蜀山区工大299号</div>
             </div>
             <div class="dianming">
                    <div class="head">海外直邮店<span>联系客服</span></div>
                    <div class="clearfix xiangqing">
                            <img src="image/modo.jpg" class="fl"/>
                            <div class="fl">
                              <a href="#">
                                夏威夷果零食炒货大礼包<br />
                               <span>规格：100g;</span> 
                              </a>
                            </div>
                            <div class="fr">
                             <p>￥38.76</p>
                              <span>￥38.76</span>
                              <p>退订单</p>
                            </div>
                     </div>
                     <div class="total">
                        <div><span>商品总金额：</span> <span>￥38.76</span></div>
                       <div><span>快递运费：全国包邮</span></div>
                    </div>
               
           </div>

           <div class="date">
                <p>订单编号：<span>39054969005583</span></p>
                <p>下单时间：<span>2017-11-11 14:41:30</span></p>
                <p>支付时间：<span>2017-11-11 14:41:30</span></p>
                <p>发货时间：<span>2017-11-11 14:41:30</span></p>
                <p>收货时间：<span>2017-11-11 14:41:30</span></p>
           </div>


          	</div>
    </div>
  </div>
</html